React Router(一)

router

react提供了一个官方的路由组件react-router，让你的单页面应用支持页面的跳转以及动态渲染。
React Router 是完整的 React 路由解决方案
React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。你第一个念头想到的应该是 URL，而不是事后再想起。

router的优点

• 良好的交互体验
  => 用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。

• 良好的前后端工作分离模式
  =>单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。

• 减轻服务器压力
  =>服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

• 共用一套后端程序代码
  =>不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；

router的缺点

• SEO难度较高
  =>由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧
• 前进、后退管理
  =>由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。
• 初次加载耗时多
  =>为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。

学习网址

https://reacttraining.com/react-router/

Router安装

1.首先通过 npm 安装：

npm i react-router-dom -S

2.在显示页面index.js引入

import { BrowserRouter as Router} from 'react-router-dom'

ReactDOM.render(
        <Router>
            <App />   在根节点下使用
        </Router>
        ,
        document.getElementById('root')
    )

3.在index组件里引入

<Route path="/" component={Index}/>
<Route path="/about" component={About}/>
<Link to="/">说明</Link>